import React, { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { http, API_PATH } from '../utils/http';
import { message, Spin, Image, Typography, Button, Card, Empty, Modal, Input } from 'antd';
import { ArrowLeftOutlined, DownloadOutlined, PictureOutlined, DownOutlined, UpOutlined, EditOutlined } from '@ant-design/icons';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import JSZip from 'jszip';

const { Text } = Typography;

// 接口响应类型定义
interface TaskResult {
    type: string;
    index: number;
    url: string;
}

interface UpdateContentResponse {
    task_id: string;
    updated_at: number;
}

interface RegenerateDescriptionResponse {
    task_id: string;
    message_id: string;
    success: boolean;
    submitted_at: number;
}

interface UpdateDescriptionResponse {
    task_id: string;
    updated_at: number;
}

interface IllustrationTask {
    id: string;
    task_id: string;
    article_id: string;
    status: string;
    created_at: number;
    updated_at: number;
    task_status: string;
    task_status_msg: string;
    received_at: number;
    task_result: TaskResult[];
    img_desc?: string; // 图像描述字段
    img_index: number; // 任务编号
    article_text?: string; // 文章内容字段
}

interface GenerateImageResponse {
    article_id: string;
    message_id: string;
}

// 重新生成图片响应数据
interface RegenerateImageData {
    task_id: string;
    message_id: string;
    success: boolean;
    submitted_at: number;
}

const IllustrationPage: React.FC = () => {
    const navigate = useNavigate();
    const { article_id } = useParams<{ article_id: string }>();
    const [loading, setLoading] = useState(true);
    const [illustrations, setIllustrations] = useState<IllustrationTask[]>([]);
    const [expandedArticles, setExpandedArticles] = useState<Record<string, boolean>>({});
    const [editModalVisible, setEditModalVisible] = useState(false);
    const [currentEditingTask, setCurrentEditingTask] = useState<string>('');
    const [editingText, setEditingText] = useState('');
    const [editDescModalVisible, setEditDescModalVisible] = useState(false);
    const [currentEditingDescTask, setCurrentEditingDescTask] = useState<string>('');
    const [editingDesc, setEditingDesc] = useState('');

    // 切换文章内容的展开/折叠状态
    const toggleArticleExpand = (taskId: string) => {
        setExpandedArticles(prev => ({
            ...prev,
            [taskId]: !prev[taskId]
        }));
    };

    // 获取配图数据
    const fetchIllustrations = async () => {
        try {
            setLoading(true);
            const response = await http.get<IllustrationTask[]>(
                API_PATH.ARTICLE_CENTER.ILLUSTRATION(article_id || ''),
                {}
            );

            response.onSuccess(() => {
                if (response.data) {
                    setIllustrations(response.data);
                }
            }).onError((_code, msg) => {
                message.error(`获取配图失败: ${msg}`);
            });
        } catch (error) {
            console.error('网络请求异常:', error);
            message.error('网络请求异常');
        } finally {
            setLoading(false);
        }
    };

    // 生成配图
    const generateImage = async () => {
        // 检查是否已有配图任务
        if (illustrations.length > 0) {
            Modal.confirm({
                title: '提示',
                content: '当前已有配图，是否重新生成？',
                onOk: async () => {
                    try {
                        setLoading(true);
                        const response = await http.post<GenerateImageResponse>(
                            API_PATH.ARTICLE_CENTER.GENERATE_IMAGE,
                            { article_id: article_id }
                        );

                        response.onSuccess(() => {
                            if (response.data) {
                                message.success('文章生图任务已提交到队列');
                                // 重新获取配图数据
                                fetchIllustrations();
                            }
                        }).onError((_code, msg) => {
                            message.error(`生成配图失败: ${msg}`);
                        });
                    } catch (error) {
                        console.error('网络请求异常:', error);
                        message.error('网络请求异常');
                    } finally {
                        setLoading(false);
                    }
                }
            });
            return;
        }

        try {
            setLoading(true);
            const response = await http.post<GenerateImageResponse>(
                API_PATH.ARTICLE_CENTER.GENERATE_IMAGE,
                { article_id: article_id }
            );

            response.onSuccess(() => {
                if (response.data) {
                    message.success('文章生图任务已提交到队列');
                    // 重新获取配图数据
                    fetchIllustrations();
                }
            }).onError((_code, msg) => {
                message.error(`生成配图失败: ${msg}`);
            });
        } catch (error) {
            console.error('网络请求异常:', error);
            message.error('网络请求异常');
        } finally {
            setLoading(false);
        }
    };

    // 打开编辑弹窗
    const openEditModal = (taskId: string, text: string) => {
        setCurrentEditingTask(taskId);
        setEditingText(text);
        setEditModalVisible(true);
    };

    // 保存编辑后的文章内容
    const saveArticleText = async () => {
        try {
            setLoading(true);
            // 找到当前正在编辑的任务
            const currentTask = illustrations.find(task => task.task_id === currentEditingTask);
            if (!currentTask) return;

            // 发送更新请求
            const response = await http.post<UpdateContentResponse>(
                API_PATH.ARTICLE_CENTER.UPDATE_CONTENT,
                {
                    task_id: currentTask.id,
                    article_text: editingText
                }
            );

            response.onSuccess((data) => {
                if (data && !Array.isArray(data)) {
                    // 更新本地状态
                    setIllustrations(prev =>
                        prev.map(task =>
                            task.task_id === currentEditingTask
                                ? { ...task, article_text: editingText, updated_at: data.updated_at }
                                : task
                        )
                    );
                    message.success('文章内容已更新');
                    setEditModalVisible(false);
                }
            }).onError((_code, msg) => {
                message.error(`更新文章内容失败: ${msg}`);
            });
        } catch (error) {
            console.error('网络请求异常:', error);
            message.error('网络请求异常');
        } finally {
            setLoading(false);
        }
    };

    // 打开编辑描述弹窗
    const openEditDescModal = (taskId: string, desc: string) => {
        setCurrentEditingDescTask(taskId);
        setEditingDesc(desc);
        setEditDescModalVisible(true);
    };

    // 保存编辑后的图像描述
    const saveImageDescription = async () => {
        try {
            setLoading(true);
            // 找到当前正在编辑的任务
            const currentTask = illustrations.find(task => task.id === currentEditingDescTask);
            if (!currentTask) return;

            // 发送更新请求
            const response = await http.post<UpdateDescriptionResponse>(
                API_PATH.ARTICLE_CENTER.UPDATE_DESCRIPTION,
                {
                    task_id: currentTask.id,
                    img_desc: editingDesc
                }
            );

            response.onSuccess(() => {
                message.success('图像描述已更新');
                setEditDescModalVisible(false);
                // 重新获取配图数据
                fetchIllustrations();
            }).onError((_code, msg) => {
                message.error(`更新图像描述失败: ${msg}`);
            });
        } catch (error) {
            console.error('网络请求异常:', error);
            message.error('网络请求异常');
        } finally {
            setLoading(false);
        }
    };

    // 重新生成图像描述
    const regenerateDescription = async (taskId: string) => {
        try {
            setLoading(true);
            // 找到当前任务
            const currentTask = illustrations.find(task => task.task_id === taskId);
            if (!currentTask) return;

            // 发送重新生成请求
            const response = await http.post<RegenerateDescriptionResponse>(
                API_PATH.ARTICLE_CENTER.REGENERATE_DESCRIPTION,
                {
                    task_id: currentTask.id,
                    priority: 0
                }
            );

            response.onSuccess(() => {
                message.success('图像描述重新生成任务已提交');
                // 重新获取配图数据
                fetchIllustrations();
            }).onError((_code, msg) => {
                message.error(`重新生成描述失败: ${msg}`);
            });
        } catch (error) {
            console.error('网络请求异常:', error);
            message.error('网络请求异常');
        } finally {
            setLoading(false);
        }
    };

    // 重新生成图片
    const regenerateImage = async (taskId: string) => {
        try {
            setLoading(true);
            const response = await http.post<RegenerateImageData>(
                API_PATH.ARTICLE_CENTER.REGENERATE_IMAGE,
                {
                    task_id: taskId,
                    priority: 5
                }
            );

            response.onSuccess((data) => {
                if (data) {
                    message.success('图片重新生成任务已提交');
                    // 重新获取配图数据
                    fetchIllustrations();
                }
            }).onError((_code, msg) => {
                message.error(`重新生成图片失败: ${msg}`);
            });
        } catch (error) {
            console.error('网络请求异常:', error);
            message.error('网络请求异常');
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        if (article_id) {
            fetchIllustrations();
        }
    }, [article_id]);

    // 返回文章详情
    const handleBack = () => {
        navigate(`/article-detail/${article_id}`);
    };

    // 格式化时间
    const formatTime = (timestamp: number) => {
        const date = new Date(timestamp);
        return date.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });
    };

    // 获取任务状态中文显示文本
    const getTaskStatusText = (status: string) => {
        switch (status.toLowerCase()) {
            case 'submitted':
                return '已提交';
            case 'processing':
                return '处理中';
            case 'succeed':
                return '成功';
            case 'failed':
                return '失败';
            default:
                return status;
        }
    };

    // 获取任务状态对应的颜色
    const getTaskStatusColor = (status: string) => {
        switch (status.toLowerCase()) {
            case 'submitted':
                return 'blue';
            case 'processing':
                return 'orange';
            case 'succeed':
                return 'green';
            case 'failed':
                return 'red';
            default:
                return 'default';
        }
    };

    return (
        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100 bg-fixed">
            {/* 背景装饰元素 */}
            <div className="fixed inset-0 overflow-hidden pointer-events-none">
                <div className="absolute top-40 right-[10%] w-64 h-64 bg-indigo-200/20 rounded-full mix-blend-multiply filter blur-2xl opacity-20 animate-floating" style={{ animationDelay: '0s' }}></div>
                <div className="absolute top-20 left-[5%] w-96 h-96 bg-purple-200/30 rounded-full mix-blend-multiply filter blur-2xl opacity-20 animate-floating" style={{ animationDelay: '-2s' }}></div>
                <div className="absolute top-1/2 left-[40%] w-44 h-44 bg-green-200/30 rounded-full mix-blend-multiply filter blur-2xl opacity-20 animate-floating" style={{ animationDelay: '-1s' }}></div>
                <div className="absolute bottom-40 right-[30%] w-72 h-72 bg-yellow-200/30 rounded-full mix-blend-multiply filter blur-2xl opacity-20 animate-floating" style={{ animationDelay: '-3s' }}></div>
            </div>

            {/* 顶部导航栏 */}
            <header className="bg-white border-b border-gray-200 shadow-sm sticky top-0 z-10">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="flex justify-between items-center h-16">
                        <div className="flex items-center">
                            <button
                                onClick={handleBack}
                                className="inline-flex items-center px-3.5 py-2 border border-gray-200/70 rounded-lg text-sm font-medium text-gray-700 bg-white/90 hover:bg-indigo-50/80 hover:text-indigo-600 hover:border-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200 shadow-sm backdrop-blur-sm"
                            >
                                <ArrowLeftOutlined className="mr-1.5" />
                                返回文章详情
                            </button>
                        </div>
                        <h1 className="text-xl font-semibold text-gray-900 relative">
                            <span className="relative z-10 bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">文章配图</span>
                            <span className="absolute inset-x-0 bottom-0 h-1 bg-gradient-to-r from-indigo-200 to-purple-200 -z-0 rounded-full transform translate-y-1"></span>
                        </h1>
                        <div className="flex items-center gap-2">
                            {illustrations.length > 0 && illustrations.some(task => task.task_result && task.task_result.length > 0) && (
                                <button
                                    onClick={async () => {
                                        // 显示下载中提示
                                        const key = 'downloading-all';
                                        message.loading({ content: '正在准备下载所有配图...', key });

                                        try {
                                            let totalImages = 0;

                                            // 计算总图片数
                                            illustrations.forEach(task => {
                                                if (task.task_result && task.task_result.length > 0) {
                                                    totalImages += task.task_result.length;
                                                }
                                            });

                                            if (totalImages === 0) {
                                                message.info({ content: '没有可下载的配图', key, duration: 2 });
                                                return;
                                            }

                                            // 创建zip对象
                                            const zip = new JSZip();
                                            let downloadedCount = 0;

                                            // 遍历所有任务
                                            for (const task of illustrations) {
                                                if (task.task_result && task.task_result.length > 0) {
                                                    // 为每个任务创建一个文件夹
                                                    const taskFolder = zip.folder(`任务-${task.img_index}`);

                                                    // 遍历任务中的所有图片
                                                    for (let i = 0; i < task.task_result.length; i++) {
                                                        const result = task.task_result[i];

                                                        // 更新进度
                                                        downloadedCount++;
                                                        message.loading({
                                                            content: `正在处理图片 ${downloadedCount}/${totalImages}...`,
                                                            key
                                                        });

                                                        // 获取图片数据
                                                        const response = await fetch(result.url);
                                                        const blob = await response.blob();

                                                        // 添加到zip文件中
                                                        taskFolder?.file(`配图-${task.img_index}-${i + 1}.png`, blob);
                                                    }
                                                }
                                            }

                                            // 生成zip文件
                                            message.loading({ content: '正在生成压缩包...', key });
                                            const zipBlob = await zip.generateAsync({ type: 'blob' });

                                            // 下载zip文件
                                            const blobUrl = URL.createObjectURL(zipBlob);
                                            const link = document.createElement('a');
                                            link.href = blobUrl;
                                            link.download = `文章${article_id}所有配图.zip`;
                                            document.body.appendChild(link);
                                            link.click();
                                            document.body.removeChild(link);

                                            // 释放资源
                                            setTimeout(() => URL.revokeObjectURL(blobUrl), 100);

                                            message.success({ content: `所有 ${totalImages} 张配图已打包下载！`, key, duration: 2 });
                                        } catch (error) {
                                            console.error('批量下载图片失败:', error);
                                            message.error({ content: '下载过程中出现错误', key, duration: 2 });
                                        }
                                    }}
                                    className="inline-flex items-center px-4 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-green-500 to-teal-600 hover:from-green-600 hover:to-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200"
                                >
                                    <DownloadOutlined className="mr-1.5" />
                                    下载所有配图
                                </button>
                            )}
                            <button
                                onClick={generateImage}
                                className="inline-flex items-center px-4 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200"
                            >
                                <PictureOutlined className="mr-1.5" />
                                {illustrations.length > 0 ? '重新配图' : '立即配图'}
                            </button>
                        </div>
                    </div>
                </div>
            </header>

            {/* 主内容区 */}
            <main className="px-4 sm:px-6 lg:px-8 py-8">
                {loading ? (
                    <div className="flex justify-center items-center py-12">
                        <Spin size="large" tip="加载中..." />
                    </div>
                ) : illustrations.length > 0 ? (
                    <div className="grid grid-cols-1 gap-6">
                        {illustrations.map((task) => (
                            <Card
                                key={task.task_id}
                                className="shadow-sm border border-gray-100"
                                title={
                                    <div className="flex items-center justify-between">
                                        <div className="flex items-center gap-2">
                                            <span className="text-gray-500">任务 #{task.img_index}</span>
                                            <span className={`px-2.5 py-1 rounded-md text-sm font-medium text-${getTaskStatusColor(task.task_status)}-600 bg-${getTaskStatusColor(task.task_status)}-50 border border-${getTaskStatusColor(task.task_status)}-200`}>
                                                {getTaskStatusText(task.task_status)}
                                            </span>
                                        </div>
                                        <Text type="secondary">任务ID: {task.task_id}</Text>
                                    </div>
                                }
                            >
                                <div className="text-sm text-gray-500 mb-3 -mt-1 flex items-center">
                                    <span className="inline-flex items-center">
                                        <span className="mr-1.5 h-2 w-2 rounded-full bg-indigo-400"></span>
                                        更新时间: {formatTime(task.updated_at)}
                                    </span>
                                </div>

                                {task.task_status_msg && (
                                    <div className="mb-4 p-3 bg-gray-50 rounded-lg">
                                        <Text type={task.task_status === 'failed' ? 'danger' : 'secondary'}>
                                            {task.task_status_msg}
                                        </Text>
                                    </div>
                                )}

                                {task.article_text && (
                                    <div className="mb-4">
                                        <div className="text-md font-medium text-gray-700 border-b pb-2 mb-3 flex justify-between items-center">
                                            <span>文章内容</span>
                                            <button
                                                onClick={() => toggleArticleExpand(task.task_id)}
                                                className="inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-full bg-indigo-100 text-indigo-700 hover:bg-indigo-200 transition-all duration-200"
                                            >
                                                {expandedArticles[task.task_id] ? <UpOutlined className="mr-1.5" /> : <DownOutlined className="mr-1.5" />}
                                                {expandedArticles[task.task_id] ? '收起' : '展开'}
                                            </button>
                                        </div>
                                        {expandedArticles[task.task_id] && (
                                            <div className="bg-gray-50 p-3 rounded-lg border border-gray-200 max-h-96 overflow-y-auto shadow-sm">
                                                <div className="flex justify-end mb-2">
                                                    <Button
                                                        type="text"
                                                        icon={<EditOutlined />}
                                                        className="text-indigo-600 hover:text-indigo-700 transition-colors"
                                                        onClick={() => openEditModal(task.task_id, task.article_text || '')}
                                                    >
                                                        编辑内容
                                                    </Button>
                                                </div>
                                                <div className="prose prose-indigo max-w-none">
                                                    <ReactMarkdown
                                                        remarkPlugins={[remarkGfm]}
                                                        rehypePlugins={[rehypeRaw]}
                                                    >
                                                        {task.article_text}
                                                    </ReactMarkdown>
                                                </div>
                                            </div>
                                        )}
                                    </div>
                                )}

                                {task.img_desc && (
                                    <div className="mb-4 mt-12 border-t-2 border-gray-300 pt-8 bg-gray-50/50 rounded-lg p-4">
                                        <div className="text-md font-medium text-gray-700 border-b pb-2 mb-3 flex justify-between items-center">
                                            <span>图像描述</span>
                                            <div className="flex items-center gap-2">
                                                <button
                                                    onClick={() => openEditDescModal(task.id, task.img_desc || '')}
                                                    className="inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-full bg-indigo-100 text-indigo-700 hover:bg-indigo-200 transition-all duration-200"
                                                    disabled={loading}
                                                >
                                                    <EditOutlined className="mr-1.5" />
                                                    直接编辑
                                                </button>
                                                <button
                                                    onClick={() => regenerateDescription(task.task_id)}
                                                    className="inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-full bg-indigo-100 text-indigo-700 hover:bg-indigo-200 transition-all duration-200"
                                                    disabled={loading}
                                                >
                                                    <EditOutlined className="mr-1.5" />
                                                    重新生成
                                                </button>
                                            </div>
                                        </div>
                                        <div className="bg-gray-50 p-3 rounded-lg border border-gray-200 shadow-sm">
                                            <div className="prose prose-indigo max-w-none">
                                                <ReactMarkdown
                                                    remarkPlugins={[remarkGfm]}
                                                    rehypePlugins={[rehypeRaw]}
                                                >
                                                    {task.img_desc}
                                                </ReactMarkdown>
                                            </div>
                                        </div>
                                    </div>
                                )}

                                {task.task_result && task.task_result.length > 0 ? (
                                    <>
                                        <div className="mb-4">
                                            <div className="text-md font-medium text-gray-700 border-b pb-2 mb-3 flex justify-between items-center">
                                                <span>配图结果</span>
                                            </div>
                                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                                {task.task_result.map((result, index) => (
                                                    <div key={index} className="bg-gray-50 p-2 rounded-lg border border-gray-200 flex flex-col">
                                                        <div className="relative">
                                                            <Image
                                                                src={result.url}
                                                                alt={`配图 ${index + 1}`}
                                                                className="w-full h-auto rounded-lg shadow-sm"
                                                            />
                                                        </div>
                                                        <div className="mt-2 flex justify-between items-center">
                                                            <Text className="text-gray-500">配图-{task.img_index}-{index + 1}</Text>
                                                            <div className="flex items-center gap-2">
                                                                <button
                                                                    onClick={() => regenerateImage(task.id)}
                                                                    className="inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-full bg-indigo-100 text-indigo-700 hover:bg-indigo-200 transition-all duration-200"
                                                                    disabled={loading}
                                                                >
                                                                    <PictureOutlined className="mr-1.5" />
                                                                    重新生成
                                                                </button>
                                                                <button
                                                                    onClick={async (e) => {
                                                                        e.preventDefault();
                                                                        e.stopPropagation();
                                                                        try {
                                                                            // 先获取图片blob对象
                                                                            const response = await fetch(result.url);
                                                                            const blob = await response.blob();
                                                                            // 创建一个blob URL
                                                                            const blobUrl = URL.createObjectURL(blob);
                                                                            // 创建a标签并设置download属性
                                                                            const link = document.createElement('a');
                                                                            link.href = blobUrl;
                                                                            link.download = `配图-${task.img_index}-${index + 1}.png`;
                                                                            // 模拟点击并清理
                                                                            document.body.appendChild(link);
                                                                            link.click();
                                                                            document.body.removeChild(link);
                                                                            // 释放blob URL
                                                                            setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
                                                                        } catch (error) {
                                                                            console.error('下载图片失败:', error);
                                                                            message.error('下载图片失败');
                                                                        }
                                                                    }}
                                                                    className="inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 transition-all duration-200"
                                                                >
                                                                    <DownloadOutlined className="mr-1.5" />
                                                                    下载
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>
                                    </>
                                ) : (
                                    <div className="col-span-full">
                                        <Empty description="暂无配图结果" />
                                    </div>
                                )}
                            </Card>
                        ))}
                    </div>
                ) : (
                    <div className="flex flex-col items-center justify-center py-12">
                        <Empty description="暂无配图任务" />
                        <Button
                            type="primary"
                            className="mt-4"
                            onClick={handleBack}
                        >
                            返回文章详情
                        </Button>
                    </div>
                )}
            </main>

            {/* 文章内容编辑弹窗 */}
            <Modal
                title="编辑文章内容"
                open={editModalVisible}
                onOk={saveArticleText}
                onCancel={() => setEditModalVisible(false)}
                width={800}
                okText="保存"
                cancelText="取消"
                className="article-edit-modal"
            >
                <Input.TextArea
                    value={editingText}
                    onChange={(e) => setEditingText(e.target.value)}
                    autoSize={{ minRows: 15, maxRows: 30 }}
                    placeholder="请输入文章内容..."
                    className="font-mono text-sm"
                />
            </Modal>

            {/* 图像描述编辑弹窗 */}
            <Modal
                title="编辑图像描述"
                open={editDescModalVisible}
                onOk={saveImageDescription}
                onCancel={() => setEditDescModalVisible(false)}
                width={800}
                okText="保存"
                cancelText="取消"
                className="desc-edit-modal"
            >
                <Input.TextArea
                    value={editingDesc}
                    onChange={(e) => setEditingDesc(e.target.value)}
                    autoSize={{ minRows: 15, maxRows: 30 }}
                    placeholder="请输入图像描述..."
                    className="font-mono text-sm"
                />
            </Modal>

            {/* 添加动画样式 */}
            <style dangerouslySetInnerHTML={{
                __html: `
                @keyframes floating {
                    0% {
                        transform: translateY(0px);
                    }
                    50% {
                        transform: translateY(-5px);
                    }
                    100% {
                        transform: translateY(0px);
                    }
                }
                
                .animate-floating {
                    animation: floating 4s ease-in-out infinite;
                }
                `
            }} />
        </div>
    );
};

export default IllustrationPage; 